/*
 * @Author: HuangYue
 * @Date: 2022-05-09 17:16:47
 * @LastEditors: HuangYue
 * @LastEditTime: 2022-05-12 14:38:09
 * @FilePath: /graduation/src/components/DeviceDetail/DeviceVisualization/Tube/index.jsx
 * @Description:
 */
import React from 'react';
import moment from 'moment';
import { Row, Col, Card, DatePicker, Badge, Space } from 'antd';
const { RangePicker } = DatePicker;
import ChartCard from '../../../../pages/DataVisualization//components/ChartCard';
import { Progress } from '@ant-design/charts';
import { GridContent } from '@ant-design/pro-layout';
import DemoLine from '../components/Line';
import { randomNumber } from '../../../../util/random';
function TubeVisualization() {
  const getData = (x, y) => x + Number(Math.random() * (y - x));
  let currentTubeScan = Number(randomNumber(6));
  let currentTubeMA = Number(randomNumber(8));
  let currentTubeCount = Number(randomNumber(5));
  let currentTubeKWH = Number(randomNumber(5));
  const tubeInfo = {
    tubeId: randomNumber(6) + 'G' + randomNumber(2), // 球管序列号
    tubeOld: getData(60, 80).toFixed(2), // 使用寿命
    tubeScan: currentTubeScan, // 扫描秒
    tubemA: currentTubeMA, // 毫安秒
    tubeCount: currentTubeCount, // 检查数
    tubeKWH: currentTubeKWH, // 千瓦时
  };
  const LineData = [];
  const beginDay = new Date().getTime();
  const installdate = moment(
    new Date(beginDay - 1000 * 60 * 60 * 24 * Number(randomNumber(3))),
  ).format('YYYY-MM-DD');

  for (let i = 0; i <= 30; i += 1) {
    LineData.unshift({
      type: '扫描秒(seconds)',
      time: moment(new Date(beginDay - 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
      count: currentTubeScan,
    });
    currentTubeScan = currentTubeScan - Number(randomNumber(4));
  }
  for (let i = 0; i <= 30; i += 1) {
    LineData.unshift({
      type: '毫安秒(mAs)',
      time: moment(new Date(beginDay - 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
      count: currentTubeMA,
    });
    currentTubeMA = currentTubeMA - Number(randomNumber(6));
  }
  for (let i = 0; i <= 30; i += 1) {
    LineData.unshift({
      type: '检查数(次)',
      time: moment(new Date(beginDay - 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
      count: currentTubeCount,
    });
    currentTubeCount = currentTubeCount - Number(randomNumber(3));
  }
  for (let i = 0; i <= 30; i += 1) {
    LineData.unshift({
      type: '千瓦时(KwH)',
      time: moment(new Date(beginDay - 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
      count: currentTubeKWH,
    });
    currentTubeKWH = currentTubeKWH - Number(randomNumber(3));
  }

  return (
    <GridContent>
      <>
        <Row gutter={24}>
          <Col xl={8} lg={10} md={15} sm={24} xs={24}>
            <ChartCard
              title={`球管序列号:${tubeInfo.tubeId}`}
              total={`预估寿命:${tubeInfo.tubeOld}%`}
              footer={
                <div
                  style={{
                    width: '100%',
                    height: '100%',
                    display: 'flex',
                    justifyContent: 'space-between',
                  }}
                >
                  <span>{`安装时间:${installdate}`}</span>
                  <Badge status="processing" text="使用中" />
                </div>
              }
              contentHeight={46}
            >
              <Progress
                height={46}
                percent={tubeInfo.tubeOld / 100}
                color="#afdfe4"
                forceFit
                size={8}
                marker={[
                  {
                    value: 0.8,
                    style: {
                      stroke: '#afdfe4',
                    },
                  },
                ]}
              />
            </ChartCard>
          </Col>
          <Col xl={4} lg={7} md={9} sm={24} xs={24}>
            <ChartCard
              title="扫描秒(seconds)"
              total={tubeInfo.tubeScan}
              contentHeight={46}
              footer={
                <div
                  style={{
                    width: '100%',
                    height: '100%',
                    display: 'flex',
                    justifyContent: 'space-between',
                  }}
                >
                  <span>{moment(beginDay).format('YYYY-MM-DD')}</span>
                  <Badge status="processing" text="使用中" />
                </div>
              }
            >
              <Progress
                height={46}
                percent={Number((tubeInfo.tubeScan / 1000000).toFixed(2))}
                color="#afdfe4"
                forceFit
                size={8}
                marker={[
                  {
                    value: 0.8,
                    style: {
                      stroke: '#afdfe4',
                    },
                  },
                ]}
              />
            </ChartCard>
          </Col>
          <Col xl={4} lg={7} md={8} sm={24} xs={24}>
            <ChartCard
              title="毫安秒(mAs)"
              total={tubeInfo.tubemA}
              contentHeight={46}
              footer={
                <div
                  style={{
                    width: '100%',
                    height: '100%',
                    display: 'flex',
                    justifyContent: 'space-between',
                  }}
                >
                  <span>{moment(beginDay).format('YYYY-MM-DD')}</span>
                  <Badge status="processing" text="使用中" />
                </div>
              }
            >
              <Progress
                height={46}
                percent={Number((tubeInfo.tubemA / 100000000).toFixed(2))}
                color="#afdfe4"
                forceFit
                size={8}
                marker={[
                  {
                    value: 0.8,
                    style: {
                      stroke: '#afdfe4',
                    },
                  },
                ]}
              />
            </ChartCard>
          </Col>
          <Col xl={4} lg={12} md={8} sm={24} xs={24}>
            <ChartCard
              title="检查数(次)"
              total={tubeInfo.tubeCount}
              contentHeight={46}
              footer={
                <div
                  style={{
                    width: '100%',
                    height: '100%',
                    display: 'flex',
                    justifyContent: 'space-between',
                  }}
                >
                  <span>{moment(beginDay).format('YYYY-MM-DD')}</span>
                  <Badge status="processing" text="使用中" />
                </div>
              }
            >
              <Progress
                height={46}
                percent={Number((tubeInfo.tubeCount / 100000).toFixed(2))}
                color="#afdfe4"
                forceFit
                size={8}
                marker={[
                  {
                    value: 0.8,
                    style: {
                      stroke: '#afdfe4',
                    },
                  },
                ]}
              />
            </ChartCard>
          </Col>
          <Col xl={4} lg={12} md={8} sm={24} xs={24}>
            <ChartCard
              title="千瓦时(KwH)"
              total={tubeInfo.tubeKWH}
              contentHeight={46}
              footer={
                <div
                  style={{
                    width: '100%',
                    height: '100%',
                    display: 'flex',
                    justifyContent: 'space-between',
                  }}
                >
                  <span>{moment(beginDay).format('YYYY-MM-DD')}</span>
                  <Badge status="processing" text="使用中" />
                </div>
              }
            >
              <Progress
                height={46}
                percent={Number((tubeInfo.tubeKWH / 100000).toFixed(2))}
                color="#afdfe4"
                forceFit
                size={8}
                marker={[
                  {
                    value: 0.8,
                    style: {
                      stroke: '#afdfe4',
                    },
                  },
                ]}
              />
            </ChartCard>
          </Col>
        </Row>
        <Row gutter={24} style={{ marginTop: 24 }}>
          <Col xl={24} lg={24} md={24} sm={24} xs={24}>
            <Card
              title="设备近30天球管用量曲线"
              extra={
                <RangePicker
                  bordered={false}
                  defaultValue={[
                    moment(LineData[0].time, 'YYYY-MM-DD'),
                    moment(LineData[30].time, 'YYYY-MM-DD'),
                  ]}
                  disabled
                />
              }
            >
              <DemoLine data={LineData} />
            </Card>
          </Col>
        </Row>
      </>
    </GridContent>
  );
}

export default TubeVisualization;
